<template>
  <div class="my-container">
    <van-cell-group class="my-info">
      <van-cell
        class="base-info"
        title="单元格"
        value="内容"
        center
        is-link
        to="/login"
      >
        <van-image
          slot="icon"
          round
          width="5rem"
          height="5rem"
          src="https://img01.yzcdn.cn/vant/cat.jpeg"
        />
        <div slot="title">登录/注册</div>

        <div>
          <van-icon name="qr" size="40" /><br />
          会员码
        </div>
      </van-cell>
      <van-grid :column-num="5">
        <van-grid-item icon="label-o" text="全部订单" />
        <van-grid-item icon="logistics" text="待配送" />
        <van-grid-item icon="manager-o" text="待自提" />
        <van-grid-item icon="like-o" text="待评价" />
        <van-grid-item icon="free-postage" text="轻松退" />
      </van-grid>

      <van-grid :column-num="4" class="mb-4">
        <van-grid-item text="余额">
          <span slot="icon">0.00</span>
        </van-grid-item>
        <van-grid-item text="预付">
          <span slot="icon">0.00</span>
        </van-grid-item>
        <van-grid-item text="积分">
          <span slot="icon">0</span>
        </van-grid-item>
        <van-grid-item text="优惠券">
          <span slot="icon">0</span>
        </van-grid-item>
      </van-grid>

      <van-grid square>
        <van-grid-item icon="gold-coin-o" color="#1989fa" text="充值" />
        <van-grid-item icon="award-o" text="地址管理" />
        <van-grid-item icon="star-o" text="收藏" />
        <van-grid-item icon="envelop-o  " text="浏览记录" />
        <van-grid-item icon="send-gift-o" text="食行卡" />
        <van-grid-item icon="smile-comment-o" text="客户服务" />
        <van-grid-item icon="user-circle-o" text="帮助中心" />
        <van-grid-item icon="debit-pay" text="食行换票" />
      </van-grid>
    </van-cell-group>
  </div>
</template>

<script>
export default {
  name: "MyIndex",

  components: {},
  props: {},

  data() {
    return {};
  },
  computed: {},
  watch: {},
  created() {},

  mounted() {},

  methods: {},
};
</script>

<style lang="stylus" scoped>
.my-container {
  .van-cell-group {
    .van-cell {
      height: 210px;

      div {
        color: white;
      }
    }
  }
}

.my-container {
  .my-info {
    background: url('./bj.png') no-repeat;
    

    .base-info {
      background-color: unset;
    }

    .mb-4 {
      margin-bottom: 10px;
    }
  }
}

</style>